import { useState } from 'react'
import { Tabs, Tab, Box, Typography } from '@mui/material'

// TabPanel 组件：用于渲染不同 Tab 的内容
const TabPanel = ({ children, value, index }) => {
  return (
    <div hidden={value !== index} style={{ backgroundColor: 'red', flex: 1 }}>
      {value === index && (
        <Box p={3} sx={{ borderRadius: '8px' }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  )
}

const TabViewExample = () => {
  const [tabIndex, setTabIndex] = useState(0)

  const handleChange = (event, newIndex) => {
    setTabIndex(newIndex)
  }

  return (
    <Box sx={{ width: '100%' }}>
      {/* Tab 头部导航 */}
      <Tabs value={tabIndex} onChange={handleChange} centered>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
        <Tab label="Tab 3" />
      </Tabs>

      {/* Tab 内容区域 */}
      <TabPanel value={tabIndex} index={0}>
        这是 Tab 1 的内容
      </TabPanel>
      <TabPanel value={tabIndex} index={1}>
        这是 Tab 2 的内容
      </TabPanel>
      <TabPanel value={tabIndex} index={2}>
        这是 Tab 3 的内容
      </TabPanel>
    </Box>
  )
}

export default TabViewExample
